display: contents
適用されたタグは存在しない扱いになる
ケース4，ケース5
なるほどすぎるmrsekut.icon
code:html
<div class="grid">
<ul style="display: contents" role="list"> ←①
<li>...</li>
<li>...</li>
</ul>
<div> ←②
<p><img src="indian-other.jpg" alt="..."></p>
...
</div>
</div>
めちゃくちゃ安易な実装をするなら、
①の箇所で列挙している<li>と同じように
②のも<li>にしたい
という状況
しかし、②のブロックは意味的に異なるものなので、同列の<li>にするとおかしくなる、という状況
そこで、①で<ul>にdiplay: contentsをつけて存在しない扱いにしてる
最終的に、複数の<li>と、②の<div>が並列に並ぶことになる
htmlの意味的にも正しいし、
stylingもしやすい
テーブル